<template>
  <div class="indexContainer">
    <div class="hh">
      <div class="left">
        <img src='../public/assets/img/ccy2.jpg' alt="" class="img1" ref="img1">
      </div>
      <div class="right">
          <div>Hi,这里是一只热爱前端开发大四的开发者，欢迎大家观看我的blog</div>
          <br>
          <br>
          <div>blog使用vuepress搭建，主题为reco,我为什么要搭建这个呢？我自学前端好几个月，学习了很多
            关于前端的知识，知识容易忘记，有一天我发现了vuepress框架，了解了它的用途，于是我一时兴起
            决定做一个自己的blog,方便整理自己的学习的知识，还可以给其他人学习，哈哈哈
          </div>
          <br>
          <br>
          <div>这上面有着我的个人简历，个人喜好，最重要的是有我的学习笔记，总体来说功能还是比较简陋的，
            样式有些东西不够美观，毕竟时间和精力有限，欢迎大家一起学习，一起进步,共同进步，
            联系我wx:<b style="color:aquamarine">ccy2361708086</b>
          </div>
      </div>
    </div>
    <h1>爱看的动漫</h1>
    <div class="dongma">
      <div class="cantainer" ref="container">
        <div id="sides" ref="sides">
          <div class="item" id="item0"  @click="clickImg(0)" style="background-image:url(https://img2.baidu.com/it/u=3488885150,757918999&fm=253&fmt=auto&app=138&f=PNG?w=754&h=500)">
            <div class="content">
              <div class="name">火影忍者</div>
              <div class="des">相关介绍</div>
              <button><a href="/practice/#/dongman/huoying.html">see more</a></button>
            </div>
          </div>
          <div class="item" id="item1"  @click="clickImg(1)" style="background-image:url(https://img2.baidu.com/it/u=1779174718,345053138&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800)">
            <div class="content">
              <div class="name">进击的巨人</div>
              <div class="des">相关介绍</div>
              <button><a href="/practice/#/dongman/juren.html">see more</a></button>
            </div>
          </div>
          <div class="item" id="item2" @click="clickImg(2)" style="background-image:url(https://img1.baidu.com/it/u=3788990590,4064369341&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500)">
            <div class="content">
              <div class="name">一人之下</div>
              <div class="des">相关介绍</div>
              <button><a href="/practice/#/dongman/yiren.html">see more</a></button>
            </div>
          </div>
          <div class="item" id="item3" @click="clickImg(3)" style="background-image:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fb7519079-6d78-46ab-9557-335030ca65f7%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1678265748&t=1117242b70770a9963153b05e57797e7)">
            <div class="content">
              <div class="name">你的名字</div>
              <div class="des">相关介绍</div>
              <button><a href="/practice/#/dongman/name.html">see more</a></button>
            </div>
          </div>
        </div>
        <div class="btn">
          <div class="btn-s"  @click="prev">&lt;</div>
          <div class="btn-s" @click="next">&gt;</div>
        </div>
      </div>
    </div>
    <h1>常听歌曲</h1>
    <div class="dongma music">
      <div class="musicBox">
        <img class="imgMusic" src="https://t9.baidu.com/it/u=2814917963,2814738958&fm=74&app=80&size=f256,256&n=0&f=PNG?sec=1675789200&t=a37157f53506245eb6a812c3c85938d3" alt="">
        <div class="btnBox" @click="startImg(0)"><img class="btnstartImg"  src="https://img-qn-3.51miz.com/Element/00/83/86/31/2b089e2c_E838631_da42fcdb.png!/quality/90/unsharp/true/compress/true/format/png/fh/260" alt=""></div>
        <b>歌曲：if &nbsp;&nbsp;&nbsp;作者：丁克</b>
        <br>
        <b>I came your danger soul 我靠近你危险的灵魂 Think so you'll say hello 想着你会主动打招呼 Breaking you find to go ...</b>
        <audio class="bgMusic" style="display:none" src="../public/assets/music/If-丁可.mp3" controls></audio>
      </div>
      <div class="musicBox">
        <img class="imgMusic" src="https://img1.baidu.com/it/u=1114264522,976969180&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
        <div class="btnBox" @click="startImg(1)"><img class="btnstartImg" src="https://img-qn-3.51miz.com/Element/00/83/86/31/2b089e2c_E838631_da42fcdb.png!/quality/90/unsharp/true/compress/true/format/png/fh/260" alt=""></div>
        <b>歌曲：萤火之森 &nbsp;&nbsp;&nbsp;作者：CMJ</b>
        <br>
        <b> 此歌曲为没有填词的纯音乐,请您欣赏...</b>
        <audio class="bgMusic" style="display:none" src="../public/assets/music/萤火之森 - CMJ.mp3" controls></audio>
      </div>
      <div class="musicBox">
        <img class="imgMusic" src="https://bkimg.cdn.bcebos.com/pic/024f78f0f736afc379316fe3c957fcc4b74542a9b4ad?x-bce-process=image/resize,m_lfit,w_536,limit_1" alt="">
        <div class="btnBox" @click="startImg(2)"><img class="btnstartImg" src="https://img-qn-3.51miz.com/Element/00/83/86/31/2b089e2c_E838631_da42fcdb.png!/quality/90/unsharp/true/compress/true/format/png/fh/260" alt=""></div>
        <b>歌曲：大本钟 &nbsp;&nbsp;&nbsp;作者：周杰伦</b>
        <br>
        <b>我从未爱过你&nbsp; 怎么会想念你发什么神经&nbsp; 有理说不清
          &nbsp;只是脑袋还不清醒 ...</b>
        <audio class="bgMusic" style="display:none" src="../public/assets/music/大笨钟-周杰伦.mp3" controls></audio>
      </div>
      <div class="musicBox">
        <img class="imgMusic" src="https://y.qq.com/music/photo_new/T002R300x300M000001wJDQ03io4iV_1.jpg?max_age=2592000" alt="">
        <div class="btnBox" @click="startImg(3)"><img class="btnstartImg"  src="https://img-qn-3.51miz.com/Element/00/83/86/31/2b089e2c_E838631_da42fcdb.png!/quality/90/unsharp/true/compress/true/format/png/fh/260" alt=""></div>
        <b>歌曲：双鱼 &nbsp;&nbsp;&nbsp;作者：宇谦Rain</b>
        <br>
        <b>这感觉很危险&nbsp;你的一个眼神都会点燃我
          你满足我心底一切的幻想<br>
          这是什么感觉&nbsp;我无法叙述 ...</b>
        <audio class="bgMusic" style="display:none" src="../public/assets/music/双鱼-宇谦Rain.mp3" controls></audio>
      </div>
    </div>
  </div>
  
</template>
<script>
export default {
  data(){
    return{
      imgIndex:0,
      timer:'',
      directionFlg:true,
      musicFlg:false
    }
  },
  mounted(){
    this.setInval()
  },
  destroyed(){
    clearInterval(this.timer)
  },
  methods:{
    prev(){
      this.directionFlg = false
      this.autoMove()
    },
    next(){
      this.directionFlg = true
      this.autoMove()
    },
    autoMove(){
       let _move = ()=>{
        let lists = document.querySelectorAll('.item')
        if(this.directionFlg){
          document.querySelector('#sides').appendChild(lists[0])
        }else{
          document.querySelector('#sides').prepend(lists[lists.length - 1])
        }
       }
       _move()
    },
    setInval(){
      this.timer = setInterval(this.autoMove,3000)
      this.$refs.container.addEventListener('mouseover',()=>{
        clearInterval(this.timer)
      })
      this.$refs.container.addEventListener('mouseout',()=>{
        this.timer = setInterval(this.autoMove,3000)
      })
    },
    clickImg(index){
      let lists = document.querySelectorAll('.item')
      let singel
      lists.forEach(item=>{
        if(item.id == 'item'+index){
          return singel = item
        }
      })
      document.querySelector('#sides').prepend(singel)
    },
    startImg(index){
      if(this.musicFlg){
        document.querySelectorAll('.bgMusic')[index].pause()
        document.querySelectorAll('.btnstartImg')[index].src = 'https://img-qn-3.51miz.com/Element/00/83/86/31/2b089e2c_E838631_da42fcdb.png!/quality/90/unsharp/true/compress/true/format/png/fh/260'
        this.musicFlg = false
      }else{
        document.querySelectorAll('.bgMusic')[index].currentTime = 0
        document.querySelectorAll('.bgMusic')[index].play()
        document.querySelectorAll('.btnstartImg')[index].src = 'https://img-qn-5.51miz.com/Element/00/77/94/06/4a98cc16_E779406_8956a1d5.png!/quality/90/unsharp/true/compress/true/format/png/fh/260'
        this.musicFlg = true
      }
    },
  }
}
</script>

<style scoped>
.indexContainer{
  overflow: hidden;
}
.hh {
  
  /* background-color: pink; */
  display: flex;
}

.footer-wrapper {
  display: none;
}
.sub-sidebar-wrapper{
    display: none;
}

.dropdown-wrapper .dropdown-title .arrow {
  display: none;
}

.left {
  margin-top:60px;
  padding: 0px 50px 50px 50px;
  width: 50%;
}

.right {
  padding: 50px 0px;
  padding-right:30px;
  margin-top: 60px;
  width: 50%;
  font-size: 25px;
}

.img1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dongma{
  padding: 0px 50px 0px 50px;
  position: relative;
}
.cantainer{
  width:100%;
  height: 600px;
  box-shadow: 0 30px 50px #ccc;
  position: relative;
}

.item{
  width: 200px;
  height: 300px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: inline-block;
  background-size: cover;
  position: absolute;
  top:50%;
  margin-top: -150px;
  border-radius: 20px;
  box-shadow: 0 30px 50px #505050;
  transition: .5s;
}
.item:nth-child(1){
  
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0px;
  border-radius: 0;
  box-shadow:none;
}
.item:nth-child(2){
  left: 50%;
}
.item:nth-child(3){
  left: calc(50% + 220px);
}
.item:nth-child(4){
  left: calc(50% + 440px);
}

.item .content{
  width: 300px;
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  font-family: system-ui;
  color:#eee;
  display: none;
}
.item:nth-child(1) .content{
   display: block;
}
.item .name{
  font-size: 40px;
  font-weight: bold;
  opacity: 0;
  animation: show 1s ease-in-out 1 forwards;
}
.item .des{
  margin: 20px 0;
  opacity: 0;
  animation: show 1s ease-in-out 0.3s 1 forwards;
}
.item button{
  padding: 10px 20px;
  border: none;
  opacity: 0;
  animation: show 1s ease-in-out 0.6s 1 forwards;
}
@keyframes show{
  from{
    opacity: 0;
    transform: translateY(100px);
    filter: blur(20px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
h1{
  margin-left:50px;
}
.btn{
  width: 100%;
  position: absolute;
  bottom: 50px;
  text-align: center;
}
.btn-s{
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 45px;
  text-align: center;
  color: gray;
  background-color: #fff;
  font-size: 25px;
  border-radius: 50%;
  font-weight: bold;
  border: 1px solid #555;
  margin: 0 40px;
  transition: .5s;
}
.btn-s:hover{
  cursor: pointer;
  background-color: #ccc;
}
.music{
  display: flex;
}
.musicBox{
  flex: 2;
  height: 320px;
  box-shadow: 0 30px 50px #ccc;
  padding: 0px 10px;
  margin-bottom: 50px;
  position: relative;
}
.musicBox:hover{
  transform: translateY(-20px);
  box-shadow: 0 30px 50px rgb(15, 14, 14);
  transition: .2s;
}
.imgMusic{
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.btnstartImg{
 width: 100%;
 height: 100%;
 transform: scale(1.3);
}
.btnBox{
  width: 50px;
  height: 50px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%) ;
  border-radius: 50%;
  overflow: hidden;
}
.musicBox b{
  color: rgb(199, 193, 193);
  font-size: 13px;
}

@media only screen and (max-width:1200px) {
  .hh {
    flex-flow:row wrap
  }
  .left {
    padding: 0px 30px 5px 30px;
    width: 100%;
  }
  .right {
    padding: 5px 30px;
    margin-top: 0px;
    width: 100%;
    font-size: 20px;
  }
  h1{
    margin-left:30px;
  }
  .dongma{
    padding: 0px 30px 0px 30px;
    position: relative;
  }
  .music{
    flex-wrap: wrap;
  }
  .musicBox{
    margin-bottom: 30px;
    flex: none;
    width: 100%;
  }
}
</style>